<template>
    <div>
        <div style="text-align: left;">
            <el-button ty @click="AddAugit">保存</el-button>
        </div>
        <el-card style="max-width: 100%;margin-top: 20px ;">
            <h1 style="text-align: center;color: black;">产品质检</h1>
            <!-- 基本信息 -->
            <table style="width: 100%;border: 1px solid #ccc;margin-bottom: 50px;">
                <thead>
                    <tr style="background-color:#E1E6E6;">
                        <td style="color: black;">基本信息</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="120px"
                                class="demo-ruleForm" size="small">
                                <el-row>
                                    <el-col :span="6">
                                        <el-form-item label="质检主题" prop="inspectionTheme">
                                            <el-input v-model="form.qualityName" style="width:200px ;"
                                                @dblclick="QualityName" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="质检编号" prop="inspectionNumber">
                                            <el-input v-model="form.qualityNumber" style="width:200px ;" />
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="6">
                                        <el-form-item label="关联采购合同" prop="purchaseContract">
                                            <el-input v-model="form.purName" style="width:200px;" @dblclick="seach" placeholder="请双击选择" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="供应商名称" prop="supplierName">
                                            <el-input v-model="form.vname" style="width:200px ;" />
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="6">
                                        <el-form-item label="申请人员" prop="inspectionTheme">
                                            <el-input v-model="form.applyName" style="width:200px ;"
                                                @dblclick="person" placeholder="请双击选择" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="申请时间" prop="inspectionNumber">
                                            <el-date-picker v-model="form.applyTime" type="date" placeholder="选择日期"
                                                format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
                                        </el-form-item>
                                    </el-col>

                                </el-row>
                            </el-form>
                        </td>
                    </tr>
                </tbody>
            </table>

            <!-- 产品基本信息 -->
            <table style="width: 100%;border: 1px solid #ccc;margin-bottom: 50px;">
                <thead>
                    <tr style="background-color:#E1E6E6;">
                        <td style="color: black;">产品信息</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="120px"
                                class="demo-ruleForm" size="small">
                                <el-row>
                                    <el-col :span="6">
                                        <el-form-item label="产品名称" prop="inspectionTheme">
                                            <el-input v-model="form.productName" style="width:200px ;" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="产品编号" prop="inspectionNumber">
                                            <el-input v-model="form.productCode" style="width:200px ;" />
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="6">
                                        <el-form-item label="规格型号" prop="purchaseContract">
                                            <el-input v-model="form.spec" style="width:200px ;" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="单价" prop="inspectionTheme">
                                            <el-input v-model="form.price" style="width:200px ;" />
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="6">
                                        <el-form-item label="总金额" prop="inspectionNumber">
                                            <el-input v-model="form.totalAmount" style="width:200px ;" />
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="6">
                                        <el-form-item label="到货日期" prop="inspectionNumber">
                                            <el-input v-model="form.PurTime" style="width:200px ;" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">

                                    </el-col>
                                    <el-col :span="6">

                                    </el-col>
                                </el-row>
                            </el-form>
                        </td>
                    </tr>
                </tbody>
            </table>

            <!-- 质检信息 -->
            <table style="width: 100%;border: 1px solid #ccc;margin-bottom: 50px;">
                <thead>
                    <tr style="background-color:#E1E6E6;">
                        <td style="color: black;">质检情况</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="120px"
                                class="demo-ruleForm" size="small">
                                <el-row>
                                    <el-col :span="6">
                                        <el-form-item label="质检人员" prop="supplierName">
                                            <el-input v-model="form.qcPerson" style="width:200px ;"
                                                @dblclick="person1" placeholder="请双击选择"/>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="质检类型" prop="inspectionNumber">
                                            <el-select v-model="form.qualityType">
                                                <el-option :value=1 label="全检">全检</el-option>
                                                <el-option :value=2 label="抽检">抽检</el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="合格数量" prop="purchaseContract">
                                            <el-input v-model="form.qualified" style="width:200px ;" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="质检结果" prop="supplierName">
                                            <el-select v-model="form.qcOutcome">
                                                <el-option value="合格">合格</el-option>
                                                <el-option value="不合格">不合格</el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </td>
                    </tr>
                </tbody>
            </table>

            <!-- 审核信息 -->
            <table style="width: 100%;border: 1px solid #ccc;margin-bottom: 50px;">
                <thead>
                    <tr style="background-color:#E1E6E6;">
                        <td style="color: black;">审核信息</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="120px"
                                class="demo-ruleForm" size="small">
                                <el-row>
                                    <el-col :span="6">
                                        <el-form-item label="审核人员" prop="supplierName">
                                            <el-input v-model="form.augitName" style="width:200px ;"
                                                @dblclick="person2" placeholder="请双击选择"/>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="审核结果" prop="inspectionNumber">
                                            <el-select v-model="form.auditResults">
                                                <el-option value="紧急放行">紧急放行</el-option>
                                                <el-option value="让步接收">让步接收</el-option>
                                                <el-option value="不合格数退货">不合格数退货</el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </td>
                    </tr>
                </tbody>
            </table>
        </el-card>


        <!-- 关联采购合同 -->
        <el-dialog v-model="dialogTableVisible" title="关联采购合同" width="800">
            <el-form :inline="true" :model="formMan" class="demo-form-inline">
                <el-form-item>
                    <el-button @click="dialogTableVisible = false">取消</el-button>
                    <el-button type="primary" @click="AddClose">
                        确定
                    </el-button>
                </el-form-item>
                <el-form-item label="查询条件">
                    <el-select style="width:150px">
                        <el-option label="编号" value="1"></el-option>
                        <el-option label="供应商" value="1"></el-option>
                        <el-option label="时间" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input autocomplete="off" style="width: 200px;" />
                </el-form-item>
                <el-form-item>
                    <el-button @click="">查询</el-button>
                </el-form-item>
            </el-form>

            <el-table :data="tableDataC" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="pcNumber" label="采购合同编号" />
                <el-table-column prop="vName" label="供应商名称" />
                <el-table-column property="pcName" label="主题" />
                <el-table-column prop="spcAfterPrice" label="采购金额">
                    <template #default="scope">
                        <span style="color: red;">{{ scope.row.spcAfterPrice.toFixed(2) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="pContractsDate" label="合同日期">
                    <template #default="scope">
                        <span>{{ scope.row.pContractsDate.substring(0, 10) }} {{ scope.row.pContractsDate.substring(11,
                            19) }}</span>
                    </template>
                </el-table-column>
            </el-table>

        </el-dialog>

        <!-- 申请人员 -->
        <el-dialog v-model="dialogTableVisible1" title="申请人员" width="800">
            <div>
                <el-button @click="AddMan">确定</el-button>
                <el-button>取消</el-button>
            </div>
            <el-row>
                <el-col :span="3">
                    <el-tree style="max-width: 600px" :data="sectorlist" :props="defaultProps"
                        @node-click="handleNodeClick" />
                </el-col>
                <el-col :span="21">
                    <el-table :data="manpowerList" style="width: 100%" @selection-change="handleSelectionChange1">
                        <el-table-column type="selection" width="55" />
                        <el-table-column type="index" label="序号" align="center" />
                        <el-table-column prop="mNumber" label="档案编号" align="center" />
                        <el-table-column prop="mName" label="真实姓名" align="center" />
                        <el-table-column prop="users" label="登录账号" align="center" />
                        <el-table-column prop="mSex" label="性别" align="center">
                            <template v-slot="scope">
                                {{ scope.row.mSex == 1 ? '男' : '女' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="mPhone" label="联系电话" align="center" />
                        <el-table-column prop="mBirthDay" label="出生日期" align="center">
                            <template v-slot="scope">
                                {{ scope.row.mBirthDay.substring(0, 10) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="sectorName" label="所在部门" align="center" />
                        <el-table-column prop="postName" label="所在岗位" align="center" />
                    </el-table>
                </el-col>
            </el-row>

        </el-dialog>
        <!-- 质检人员 -->
        <el-dialog v-model="dialogTableVisible3" title="质检人员" width="800">
            <div>
                <el-button @click="AddMan1">确定</el-button>
                <el-button>取消</el-button>
            </div>
            <el-row>
                <el-col :span="3">
                    <el-tree style="max-width: 600px" :data="sectorlist" :props="defaultProps"
                        @node-click="handleNodeClick" />
                </el-col>
                <el-col :span="21">
                    <el-table :data="manpowerList" style="width: 100%" @selection-change="handleSelectionQuality">
                        <el-table-column type="selection" width="55" />
                        <el-table-column type="index" label="序号" align="center" />
                        <el-table-column prop="mNumber" label="档案编号" align="center" />
                        <el-table-column prop="mName" label="真实姓名" align="center" />
                        <el-table-column prop="users" label="登录账号" align="center" />
                        <el-table-column prop="mSex" label="性别" align="center">
                            <template v-slot="scope">
                                {{ scope.row.mSex == 1 ? '男' : '女' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="mPhone" label="联系电话" align="center" />
                        <el-table-column prop="mBirthDay" label="出生日期" align="center">
                            <template v-slot="scope">
                                {{ scope.row.mBirthDay.substring(0, 10) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="sectorName" label="所在部门" align="center" />
                        <el-table-column prop="postName" label="所在岗位" align="center" />
                    </el-table>
                </el-col>
            </el-row>

        </el-dialog>
        <!-- 审核人员 -->
        <el-dialog v-model="dialogTableVisible4" title="审核人员" width="800">
            <div>
                <el-button @click="AddMan2">确定</el-button>
                <el-button>取消</el-button>
            </div>
            <el-row>
                <el-col :span="3">
                    <el-tree style="max-width: 600px" :data="sectorlist" :props="defaultProps"
                        @node-click="handleNodeClick" />
                </el-col>
                <el-col :span="21">
                    <el-table :data="manpowerList" style="width: 100%" @selection-change="handleSelectionAugit">
                        <el-table-column type="selection" width="55" />
                        <el-table-column type="index" label="序号" align="center" />
                        <el-table-column prop="mNumber" label="档案编号" align="center" />
                        <el-table-column prop="mName" label="真实姓名" align="center" />
                        <el-table-column prop="users" label="登录账号" align="center" />
                        <el-table-column prop="mSex" label="性别" align="center">
                            <template v-slot="scope">
                                {{ scope.row.mSex == 1 ? '男' : '女' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="mPhone" label="联系电话" align="center" />
                        <el-table-column prop="mBirthDay" label="出生日期" align="center">
                            <template v-slot="scope">
                                {{ scope.row.mBirthDay.substring(0, 10) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="sectorName" label="所在部门" align="center" />
                        <el-table-column prop="postName" label="所在岗位" align="center" />
                    </el-table>
                </el-col>
            </el-row>

        </el-dialog>

        <!-- 质检申请 -->
        <el-dialog v-model="dialogTableVisible2" title="采购质检申请" width="1000">
            <el-form :inline="true" :model="formQuality" class="demo-form-inline">
                <el-form-item>
                    <el-button @click="dialogTableVisible2 = false">取消</el-button>
                    <el-button type="primary" @click="Close">
                        确定
                    </el-button>
                </el-form-item>
                <el-form-item label="查询条件">
                    <el-select style="width:150px">
                        <el-option label="编号" value="1"></el-option>
                        <el-option label="供应商" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input autocomplete="off" style="width: 200px;" />
                </el-form-item>
                <el-form-item>
                    <el-button @click="">查询</el-button>
                </el-form-item>
            </el-form>

            <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange2">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="proContract" label="采购关联合同">
                    <template v-slot="scoped">
                        <el-link type="primary" @click="GoToDetail">{{ scoped.row.proContract }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="qcCode" label="质检编号">
                    <template v-slot="scoped">
                        <el-link type="primary" @click="GoToDetail">{{ scoped.row.qcCode }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="qcTopic" label="质检主题">
                    <template v-slot="scoped">
                        <el-link href="#" type="warning" @click="GoToDetail"> {{ scoped.row.qcTopic }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="vName" label="供应商名称" />
                <el-table-column prop="qcTime" label="质检时间">
                    <template v-slot="scope">
                        {{ scope.row.qcTime.replace("T", " ").substring(0, 19) }}
                    </template>
                </el-table-column>
            </el-table>

        </el-dialog>

    </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed, watch, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
const route = useRoute()
const router = useRouter()
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
import http from '../../../http.js'


const ruleForm = ref([])
const statusList = ref([])
const dialogTableVisible = ref(false)
const dialogTableVisible1 = ref(false)
const dialogTableVisible2 = ref(false)
const dialogTableVisible3 = ref(false)
const dialogTableVisible4 = ref(false)


const form = reactive({
    "proAppId": 0,
    "purchaseContractsIds": 0,
    purName: '',
    applyTime: '',
    vname: '',
    "qualityName": "",
    "qualityNumber": "",
    "qualityType": 0,
    "qualified": 0,
    "qcOutcome": "",
    "unqualified": 0,
    "auditResults": "",
    "proContract": 0,
    "qcPerson": "",
    // "qcTime": "",
    "applyName": "",
    "augitName": "",
    "qcState": 0,
    productName: '',
    productCode: '',
    spec: '',
    price: '',
    totalAmount: '',
    PurTime: ''
})



//#region  人

//质检人员弹框
const person = () => {
    dialogTableVisible1.value = true
    GetPostList()
    GetSectorList()
    GetManpowerList()
}
const person1 = () => {
    dialogTableVisible3.value = true
    GetPostList()
    GetSectorList()
    GetManpowerList()
}
const person2 = () => {
    dialogTableVisible4.value = true
    GetPostList()
    GetSectorList()
    GetManpowerList()
}
//部门
const sectorlist = ref([])
const GetSectorList = () => {
    axios.get(http.zblnb + '/vendor/api/Post/GetSectorList')
        .then(res => {
            sectorlist.value = res.data.data;
        })
}

//岗位
const postlist = ref([])
const GetPostList = () => {
    formMan.PostId = "";
    axios.get(http.zblnb + '/vendor/api/Post/GetPostList?SectorId=' + (formMan.SectorId || 0))
        .then(res => {
            postlist.value = res.data.data;
        })
}

//树形
const handleNodeClick = (data: Tree) => {
    console.log(data)
    formMan.SectorId = data.value

    GetManpowerList();
}

//显示人员档案
//查询条件
const formMan = reactive({
    MName: "",
    Mstart: "",
    Mend: "",
    Bstart: "",
    Bend: "",
    SectorId: "",
    PostId: ""
})
//分页
const Pageman = reactive({
    Pindex: 1,
    Psize: 6,
    pcount: 0,
    lcount: 0
})

const manpowerList = ref([])
const GetManpowerList = () => {
    axios.get(http.zblnb + '/vendor/api/Manpower/GetManpowerList', {
        params: {
            Pindex: Pageman.Pindex,
            Psize: Pageman.Psize,
            MName: formMan.MName || "",
            Mstart: formMan.Mstart || "",
            Mend: formMan.Mend || "",
            Bstart: formMan.Bstart || "",
            Bend: formMan.Bend || "",
            SectorId: formMan.SectorId || "",
            PostId: formMan.PostId || "",
        }
    })
        .then(res => {
            console.log(res.data.data)
            manpowerList.value = res.data.data.list
            Pageman.lcount = res.data.data.lcount;
            Pageman.pcount = res.data.data.pcount;
            console.log(res.data.data)
        })
}
//多选框
const check = ref([])
const check1 = ref([])
const check2 = ref([])

const handleSelectionChange1 = (val: string) => {
    check.value = val
    console.log(check.value)
}

const handleSelectionQuality = (val: string) => {
    check1.value = val
    console.log(check.value)
}
const handleSelectionAugit = (val: string) => {
    check2.value = val
    console.log(check.value)
}


const AddMan = () => {
    dialogTableVisible1.value = false
    check.value.forEach((item) => {
        form.applyName = item.mContact

    })

}
const AddMan1 = () => {
    dialogTableVisible3.value = false
    check1.value.forEach((item) => {

        form.qcPerson = item.mContact
    })

}
const AddMan2 = () => {
    dialogTableVisible4.value = false
    check2.value.forEach((item) => {

        form.augitName = item.mContact
    })

}

//#endregion



//#region  采购合同

const seach = () => {
    dialogTableVisible.value = true
    GetShowTime()
}

const formC = reactive({
    pcNumber: '',
    pcPreparationDate1: '',
    pcPreparationDate2: '',
    pcOurRepresentatives: '',
    spcAfterPrice1: '',
    spcAfterPrice2: '',
    vendorId: ''
})
const tableDataC = ref([])

const PageC = ref({
    PageIndex: 1,
    PageSize: 10,
    listcount: 0,
    pagecount: 0
})

const selctCont = ref([])
const handleSelectionChange = (val: any) => {
    selctCont.value = val;
    console.log(selctCont.value);
};
const GetShowTime = () => {

    axios.get(http.zblnb + "/cg/api/PurchaseContracts/ProductTypeSelectShow", {
        params: {
            PCNumber: formC.pcNumber,
            PContractsDate1: formC.pcPreparationDate1,
            PContractsDate2: formC.pcPreparationDate2,
            PCOurRepresentatives: formC.pcOurRepresentatives,
            VendorId: formC.vendorId,
            PageIndex: PageC.value.PageIndex,
            PageSize: PageC.value.PageSize
        }
    }).then((res) => {
        tableDataC.value = res.data.data.list;
        PageC.value.listcount = res.data.data.totalcount;
        PageC.value.pagecount = res.data.data.pagecount;
        console.log(tableDataC.value)
    })
}


const AddClose = () => {
    dialogTableVisible.value = false;
    selctCont.value.forEach(item => {
        form.purName = item.pcName
        form.vname = item.vName
        form.productName = item.sppName
        form.productCode = item.sppNumber
        form.spec = item.sppSpec
        form.price = item.spcPrice
        form.totalAmount = item.spcTotalPrice
        form.PurTime = item.spcArrivalDate
    })

}

//#endregion



//#region  质检申请
const tableData = ref([])
const QualityName = () => {
    dialogTableVisible2.value = true;
    GetList()
}

const formQuality = reactive({
    Vname: '',
    PCId: ''
})

const page = reactive({
    pageIndex: 1,
    pageSize: 15,
    totalcount: 0,
    pagecount: 0
})

const selApply = ref([])
const handleSelectionChange2 = (val: any) => {
    console.log(val)
    selApply.value = val;
}

const GetList = () => {
    axios.get(http.zblnb + "/cg/api/Quality/ShowProPcApply", {
        params: {
            pageIndex: page.pageIndex,
            pageSize: page.pageSize,
            PCId: formQuality.PCId || "",
            Vname: formQuality.Vname || "",
        }
    }).then(res => {
        console.log(res.data.data)
        tableData.value = res.data.data.list
        page.pagecount = res.data.data.pagecount
        page.totalcount = res.data.data.totalcount
    })
}

//确定关闭
const Close = () => {
    dialogTableVisible2.value = false;
    selApply.value.forEach(item => {
        form.qualityName = item.qcTopic
        form.qualityNumber = item.qcCode
        form.purchaseContractsIds = item.purchaseContractsIds
    })
}
//#endregion


//添加

const rules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入供应商名称', trigger: 'blur' },

    ],
    region: [
        {
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change',
        },
    ],
})


const AddAugit = () => {
    console.log(form)

    axios.post(http.zblnb + "/cg/api/ProAugit/AddProAugit", form).then(res => {
        if (res.data.data > 0) {
            ElMessage.success("添加成功")
            router.push('/ShowProductQuality')
        } else {
            ElMessage.success("添加失败")
        }

    }).catch(err => {

    })
}

onMounted(() => {

})
</script>

<style scoped></style>